<template>
  <div class="cs-page-container">
    <LineChart :options="chartOptions" style="width:100%;height:400px" />

    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.channels"
        clearable
        filterable
        multiple
        placeholder="渠道"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-select
        v-model="listQuery.abTest"
        clearable
        filterable
        placeholder="ab测试"
        style="width:150px"
      >
        <el-option
          v-for="(test, i) in abTests"
          :key="i"
          :label="test"
          :value="test"
        />
      </el-select>
      <el-select
        v-model="listQuery.bundleId"
        clearable
        placeholder="包名"
      >
        <el-option label="花伴交友app安卓" value="com.vchat.flower" />
        <el-option label="花伴交友app苹果" value="com.vchat.flower.ios" />
        <el-option label="花伴约会app安卓" value="com.date.flower" />
        <el-option label="花伴约会app苹果" value="com.date.flower.ios" />
        <el-option label="成人约会圈app安卓" value="com.chengren.yhq" />
        <el-option label="他趣附近约会app安卓" value="com.funnychat.mask" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="日期">
          <template slot-scope="{ row }">
            <span>{{
              (row.targetDate) | parseTime('{y}-{m}-{d}')
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="激活人数">
          <template slot-scope="{ row }">
            <span>{{ row.activateCount || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="活跃人数">
          <template slot-scope="{ row }">
            <span>{{ row.activeCount || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="积分总存量">
          <template slot-scope="{ row }">
            <span>{{ parseInt(row.scoreInventory) / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="30日活跃用户积分存量">
          <template slot-scope="{ row }">
            <span>{{ parseInt(row.scoreInventory30days) / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="积分变化">
          <template slot-scope="{ row }">
            <span>{{ parseInt(row.scoreChange) / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="文字聊天">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromIm / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="语音聊天">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromVoice / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="视频聊天">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromVideo / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="礼物积分">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromGift / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="背包礼物积分">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromGiftPackage / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="直购礼物积分">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromGiftDiamond / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="任务领取积分">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromTask / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="好友分成">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromApprenticeship / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="活动获得积分">
          <template slot-scope="{ row }">
            <span>{{ row.scoreFromDraw / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="提现消耗">
          <template slot-scope="{ row }">
            <span>
              {{ row.scoreWithdrawConsume / 100 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="积分兑换钻石消耗">
          <template slot-scope="{ row }">
            <span>
              {{ row.scoreToDiamondConsume / 100 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="运营补单">
          <template slot-scope="{ row }">
            <span>{{ row.scoreOrder / 100 }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import LineChart from '@/components/LineChart'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhrScorePropList } from '@api/analysis'
import { parseTime } from '@/utils'

export default {
  name: 'ScorePropList',
  components: { TablePagination, LineChart },
  data() {
    return {
      list: [],
      channels: [],
      abTests: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 30,
        startTime: null,
        endTime: null,
        channels: [],
        abTest: null,
        bundleId: null,
        gender: null
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      inventoryList: null,
      inventoryData: [],
      inventoryDate: [],
      activeList: null,
      activeData: [],
      activeDate: [],
      chartOptions: {}
    }
  },
  created() {
    this.getChannels()
    this.doSearch()
  },
  methods: {
    getChannels() {
      this.xhrGetChannels().then(resp => {
        this.channels = resp.data
      })
    },
    doSearch() {
      const params = {
        offset: this.listQuery.offset,
        limit: this.listQuery.limit,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        abTest: this.listQuery.abTest,
        bundleId: this.listQuery.bundleId,
        channels: (this.listQuery.channels && this.listQuery.channels.join(',')) || null
      }
      xhrScorePropList(params).then(resp => {
        this.listLoading = false
        this.total = resp.data.count
        this.list = resp.data.list
        this.abTests = resp.data.abTests
        this.inventoryList = resp.data.inventory
        this.activeList = resp.data.active
        var inventoryData = []
        var inventoryDate = []
        var activeData = []
        var activeDate = []
        this.inventoryList.forEach(item => {
          inventoryData.push(item.inventory / 1000)
          inventoryDate.push(item.target_date)
        })
        this.activeList.forEach(item => {
          activeData.push(item.active / 1000)
          activeDate.push(item.target_date)
        })
        this.inventoryData = inventoryData
        this.inventoryDate = inventoryDate
        this.activeData = activeData
        this.activeDate = activeDate
        this.drawLine()
      })
    },
    drawLine() {
      this.chartOptions = {
        title: {
          text: '积分趋势'
        },
        legend: {
          data: ['15日总量', '30日活跃用户存量']
        },
        xAxisData: this.inventoryDate,
        series: [
          {
            name: '15日总量',
            type: 'line',
            data: this.inventoryData
          },
          {
            name: '30日活跃用户存量',
            type: 'line',
            data: this.activeData
          }
        ]
      }
    }
  }
}
</script>
